<!DOCTYPE html>
<html>
<head>
<title>气泡讨论板块</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
		
		<link rel="stylesheet" type="text/css" href="css/icons.css" />
		<link rel="stylesheet" type="text/css" href="css/style1.css" />
		<script src="js/modernizr.custom.js"></script>
<style>
html,body {
    padding:0px; 
    margin:0px;
    height:auto; 
    font:1em/1.4 Cambria, Georgia, sans-serif; 
    color:#333; 
    background: url(background2.jpg)  fixed ;
}

a:link,
a:visited {
    border-bottom:1px solid #c55500; 
    text-decoration:none;
    color:#c55500; 
}

a:visited {
    border-bottom:1px solid #730800; 
    color:#730800;
}
a:hover,
a:focus,
a:active {
    border:0; 
    color:#fff; 
    background:#c55500;
}

a:visited:hover,
a:visited:focus,
a:visited:active {
    color:#fff; 
    background:#730800;
}

.container {
	height:100%;
    width:80%; 
    padding:0px; 
    margin:0 auto;
    
}

.content {   
    height:60%;
    width:75%;
    
    margin:0 auto;
    z-index:1;
    
}

.top{
	width:85%;
	
	margin-left:4%;
}

h1 {
    margin:1em 0 0; 
    font-size:2.5em; 
    font-weight:normal; 
    line-height:1.2; 
    text-align:center;

}

h2 {
    margin:0.5em 0 1.5em; 
    font-size:1.25em; 
    font-weight:normal; 
    font-style:italic; 
    text-align:center;
}

p {
    margin:1em 0;
}

.content h2 {
    margin:2em 0 0.75em; 
    font-size:2em; 
    font-weight:bold; 
    font-style:normal; 
    text-align:left;
}

blockquote {
    margin:1em 0;
}

blockquote p {
    margin:0; 
    font-size:2em;
}

.follow {
    clear:both; 
    margin-top:2em; 
    font-size:1.125em;
}

.follow span {
    font-weight:bold;
}



/*这里是一条分界线*/

.triangle-right {
	position:relative;
	padding:15px;
	margin:1em 0 3em;
	color:#fff;
	background:#075698; 
	/* css3 */
	background:-webkit-gradient(linear, 0 0, 0 100%, from(#2e88c4), to(#075698));
	background:-moz-linear-gradient(#2e88c4, #075698);
	background:-o-linear-gradient(#2e88c4, #075698);
	background:linear-gradient(#2e88c4, #075698);
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
}
.triangle-right.top {
	background:-webkit-gradient(linear, 0 0, 0 100%, from(#075698), to(#2e88c4));
	background:-moz-linear-gradient(#075698, #2e88c4);
	background:-o-linear-gradient(#075698, #2e88c4);
	background:linear-gradient(#075698, #2e88c4);
}
.triangle-right.left {
	margin-left:5%;
	background:#075698;
}
.triangle-right.right {
	
	background:#075698;
}
.triangle-right:after {
	content:"";
	position:absolute;
	bottom:-20px; 
	left:50px; 
	border-width:20px 0 0 20px; 
	border-style:solid;
	border-color:#075698 transparent; 
    display:block; 
    width:0;
}



.triangle-right.left:after {
	top:16px; 
	left:-40px; 
	bottom:auto;
	border-width:15px 40px 0 0; 
	border-color:transparent #075698; 	
}
.triangle-right.left:before {
	content:""; 
	position:absolute; 
	z-index:10; 
	top:0px; 
	left:-106px; 
	width:70px; 
	height:70px;
	border:2px solid #075698;
	background:#fff;
	/* css3 */
	-webkit-border-radius:70px;
	-moz-border-radius:70px;
	border-radius:70px;
    /* reduce the damage in FF3.0 */
    display:block; 
}
.triangle-right.right:after {
	top:16px; 
	right:-40px; 
	bottom:auto;
    left:auto;
	border-width:15px 0 0 40px; 
	border-color:transparent #075698 ; 
}
.triangle-right.right:before {
	content:""; 
	position:absolute; 
	z-index:10; 
	top:0px; 
	right:-100px; 
	width:70px; 
	height:70px;
	border:2px solid #075698;
	background:#fff;
	/* css3 */
	-webkit-border-radius:70px;
	-moz-border-radius:70px;
	border-radius:70px;
    /* reduce the damage in FF3.0 */
    display:block; 
}


/*在这里换一个了*/
	.oval-thought-border {
	position:relative; 
	padding:70px 30px;
	margin:1em auto 80px;
	border:10px solid #075698; 
	color:#000; 
	font-size: 8px;
	background:#fff;
	/* css3 */
	/*
	NOTES:
	-webkit-border-radius:240px 140px; // produces oval in safari 4 and chrome 4
	-webkit-border-radius:240px / 140px; // produces oval in chrome 4 (again!) but not supported in safari 4
	Not correct application of the current spec, therefore, using longhand to avoid future problems with webkit corrects this
	*/
	-webkit-border-top-left-radius:160px 140px;
	-webkit-border-top-right-radius:160px 140px;
	-webkit-border-bottom-right-radius:160px 140px;
	-webkit-border-bottom-left-radius:160px 140px;
	-moz-border-radius:160px / 140px;
	border-radius:160px / 140px;
}

/* creates the larger circle */
.oval-thought-border:before {
	content:""; 
	position:absolute; 
	z-index:10; 
	bottom:-40px; 
	right:100px; 
	width:50px; 
	height:50px;
	border:10px solid #075698;
	background:#fff;
	/* css3 */
	-webkit-border-radius:50px;
	-moz-border-radius:50px;
	border-radius:50px;
    /* reduce the damage in FF3.0 */
    display:block; 
}

/* creates the smaller circle */
/*.oval-thought-border:after {
	content:""; 
	position:absolute; 
	z-index:10; 
	bottom:-60px; 
	right:50px; 
	width:25px; 
	height:25px; 
	border:10px solid #075698;
	background:#fff;
	-webkit-border-radius:25px;
	-moz-border-radius:25px;
	border-radius:25px;
    display:block; 
}*/
.oval-thought-border:after {
	content:""; 
	position:absolute; 
	z-index:10; 
	bottom:-100px; 
	right:-120px; 
	width:150px; 
	height:150px; 
	border:2px solid #075698;
	background:#fff;
	/* css3 */
	-webkit-border-radius:150px;
	-moz-border-radius:150px;
	border-radius:150px;
    /* reduce the damage in FF3.0 */
    display:block; 
}

    </style>
	<script>	
		var _gaq = _gaq || []; 	_gaq.push(['_setAccount', 'UA-7489188-1']); _gaq.push(['_trackPageview']);
		(function() {
			var ga = document.createElement('script'); ga.async = true; ga.src = 'http://www.google-analytics.com/ga.js';
			var s = document.getElementsByTagName('script')[0];
			s.parentNode.insertBefore(ga, s);
		})();
	</script>
</head>



<body>
	<div class="container">
		<div class="top">
			<blockquote class="oval-thought-border">
				<p>This is a blockquote that is stylsadashd aksjd kasdk najsnd kjasndjn aksnd kjasdnkjndk qwndkjanskdjn kaja nkdajnsdkjkasnd ihwekjn jandkfakld fdfkjndkfjak ldfnandfl kjldnfkjndfkjn kdjfnkj fndkj ndfkjnfkdjned to look like a thought bubble
				java[1] 是一种可以撰写跨平台应用软件的面向对象的程序设计语言，是由Sun Microsystems公司于1995年5月推出的Java程序设计语言和Java平台（即JavaEE(j2ee), JavaME(j2me), JavaSE(j2se)）的总称。Java自面世后就非常流行，发展迅速，对C++语言形成了有力冲击。Java 技术具有卓越的通用性、高效性、平台移植性和安全性，广泛应用于个人PC、数据中心、游戏控制台、科学超级计算机、移动电话和互联网，同时拥有全球最大的开发者专业社群。在全球云计算和移动互联网的产业环境下，Java更具备了显著优势和广阔前景</p>
			</blockquote>
		</div>
		<div class="content">		
			<p class="triangle-right left">But it could be any element you want.</p>
			<p class="triangle-right left">But it could be any element you want.</p>
			<p class="triangle-right left">But it could be any element you want.But it could be any element you want.But it could be any element you want.</p>
			<p class="triangle-right left">But it could be any element you want.But it could be any element you want.But it could be any element you want.But it could be any element you want.But it could be any element you want.But it could be any element you want.But it could be any element you want.But it could be any element you want.But it could be any element you want.But it could be any element you want.But it could be any element you want.</p>
			<div class="triangle-right-demo demo ">
			<p class="triangle-right right">java[1] 是一种可以撰写跨平台应用</p>
			</div>
			<div class="triangle-right-demo demo ">
			<p class="triangle-right right">java[1] 是一种可以撰写跨平台应用</p>
			</div>
			<div class="triangle-right-demo demo ">
			<p class="triangle-right right">java[1] 是一种可以撰写跨平台应用java[1] 是一种可以撰写跨平台应用java[1] 是一种可以撰写跨平台应用java[1] 是一种可以撰写跨平台应用java[1] 是一种可以撰写跨平台应用java[1] 是一种可以撰写跨平台应用java[1] 是一种可以撰写跨平台应用java[1] 是一种可以撰写跨平台应用java[1] 是一种可以撰写跨平台应用java[1] 是一种可以撰写跨平台应用java[1] 是一种可以撰写跨平台应用java[1] 是一种可以撰写跨平台应用</p>
			</div>
			<p class="triangle-right left">But it could be any element you want.But it could be any element you want.But it could be any element you want.</p>
			<div class="triangle-right-demo demo ">
			<p class="triangle-right right">java[1] 是一种可以撰写跨平台应用java[1] 是一种可以撰写跨平台应用java[1] 是一种可以撰写跨平台应用java[1] 是一种可以撰写跨平台应用java[1] 是一种可以撰写跨平台应用java[1] 是一种可以撰写跨平台应用java[1] 是一种可以撰写跨平台应用java[1] 是一种可以撰写跨平台应用java[1] 是一种可以撰写跨平台应用java[1] 是一种可以撰写跨平台应用java[1] 是一种可以撰写跨平台应用java[1] 是一种可以撰写跨平台应用</p>
			</div>
			<div class="triangle-right-demo demo ">
			<p class="triangle-right left">But it could be any element you want.But it could be any element you want.But it could be any element you want.</p>
			</div>
			<div class="triangle-right-demo demo ">
			<p class="triangle-right right">java[1] 是一种可以撰写跨平台应用java[1] 是一种可以撰写跨平台应用java[1] 是一种可以撰写跨平台应用java[1] 是一种可以撰写跨平台应用java[1] 是一种可以撰写跨平台应用java[1] 是一种可以撰写跨平台应用java[1] 是一种可以撰写跨平台应用java[1] 是一种可以撰写跨平台应用java[1] 是一种可以撰写跨平台应用java[1] 是一种可以撰写跨平台应用java[1] 是一种可以撰写跨平台应用java[1] 是一种可以撰写跨平台应用</p>
			</div>	
			
		</div>
	</div>
	<nav id="bt-menu" class="bt-menu">
				<a href="#" class="bt-menu-trigger">Menu</a>
				<ul>
					<li><a href="http://www.baidu.com" >Search</a></li>
					<li><a href="#" >Compose</a></li>
					<li><a href="#" >Profile</a></li>
					<li><a href="#" >Calendar</a></li>
					<li><a href="#" >Download</a></li>
				</ul>
			</nav>
		
	</body>
	<script src="js/classie.js"></script>
	<script src="js/borderMenu.js"></script>
</html>  